Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add valid svg attributes and allow empty attributes #524

Open
wants to merge 4 commits into
base: master
Choose a base branch
from

Conversation

ph1p
Copy link

@ph1p ph1p commented Feb 6, 2019

This PR adds a list of all valid SVG Attributes (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute) and allows us to set own attributtes with JavaScript e. g. for initialisation.

Now

<svg>
  <path class="target" d=""> <!-- Can't do that. We have to write at least one char: ' ... d=" " ...' -->
</svg>

With this PR

<svg>
  <path class="target">
</svg>

JavaScript

// we can set our values to initialize our svg
anime.set('.target', {
  d: 'M50 ...'
});

Some lines have changes due to removed whitespaces at the end.
@@ -452,7 +736,7 @@ function getCSSValue(el, prop, unit) {
}

function getAnimationType(el, prop) {
if (is.dom(el) && !is.inp(el) && (getAttribute(el, prop) || (is.svg(el) && el[prop]))) return 'attribute';
if (is.dom(el) && !is.inp(el) && (getAttribute(el, prop) || (is.svg(el) && arrayContains(validSvgAttributes, prop)))) return 'attribute';

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is good improvement for .set() and animatable values. But you affect some not animatable values like class. Need to add a check for preventing animating such attributes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants